<!-- <template>
  <div class="main-content1">
    <cesium-map :cesium-options="cesiumOptions0" />
  </div>
  <div class="main-content2">
    <cesium-map :cesium-options="cesiumOptions1" />
  </div>
  <div class="main-content3">
    <cesium-map :cesium-options="cesiumOptions2" />
  </div>
  <div class="main-content4">
    <cesium-map :cesium-options="cesiumOptions3" />
  </div>
  <div class="main-content5">
    <cesium-map :cesium-options="cesiumOptions4" />
  </div>
  <div class="main-content6">
    <cesium-map :cesium-options="cesiumOptions5" />
  </div>
  <div class="main-content7">
    <cesium-map :cesium-options="cesiumOptions6" />
  </div>
  <div class="main-content8">
    <cesium-map :cesium-options="cesiumOptions7" />
  </div>
  <div class="main-content9">
    <cesium-map :cesium-options="cesiumOptions8" />
  </div>
</template> -->

<template>
  <div class="main-content1">
    <cesium-map :cesium-options="cesiumOptions0" />
  </div>
  <div class="main-content2">
    <cesium-map :cesium-options="cesiumOptions1" />
  </div>
</template>

<script setup lang="ts" name="weather">
import { getImageryProviderViewModels, getTerrainProviderViewModels } from '@/cesium-api/map-config'
import { We_getInstance } from '@/we-api/we-env'

const cesiumOptions = {
  imageryProviderViewModels: getImageryProviderViewModels(),
  terrainProviderViewModels: getTerrainProviderViewModels(),
  homeButton: false,
  scene3DOnly: true,
  showNavigationWidget: false,
  timeline: false,
  animation: false,
  baseLayerPicker: true,
  defaultImagery: 0,
}

const cesiumOptions0 = {
  ...cesiumOptions,
  homeButton: true,
  multiViewIndex: 0,
  timeline: true,
}
const cesiumOptions1 = {
  ...cesiumOptions,
  multiViewIndex: 1,
  timeline: true,
}
const cesiumOptions2 = {
  ...cesiumOptions,
  multiViewIndex: 2,
}
const cesiumOptions3 = {
  ...cesiumOptions,
  multiViewIndex: 3,
}
const cesiumOptions4 = {
  ...cesiumOptions,
  multiViewIndex: 4,
}
const cesiumOptions5 = {
  ...cesiumOptions,
  multiViewIndex: 5,
}
const cesiumOptions6 = {
  ...cesiumOptions,
  multiViewIndex: 6,
}
const cesiumOptions7 = {
  ...cesiumOptions,
  multiViewIndex: 7,
}
const cesiumOptions8 = {
  ...cesiumOptions,
  multiViewIndex: 8,
}

const viewNum = 2

const getWE = (i: number = 0): WeatherEarth.We => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  return We_getInstance(i)
}

const lastCameraPosition: Cesium.Cartesian3[] = []
const currentPosition3D = new Cesium.Cartesian3()
const currentPosition2D = new Cesium.Cartesian3()

const setupViewSync = () => {
  if (lastCameraPosition.length === 0) {
    for (let i = 0; i < viewNum; i++) {
      lastCameraPosition.push(new Cesium.Cartesian3())
    }
  }

  class SyncListnenr {
    update() {
      let viewChangeIndex = -1
      let viewChangeSceneMode
      for (let i = 0; i < viewNum; i++) {
        const camera = getWE(i).viewer.camera
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if (camera._mode === Cesium.SceneMode.SCENE3D) {
          if (!currentPosition3D.equalsEpsilon(camera.position, 1e-6)) {
            viewChangeIndex = i

            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            //@ts-ignore
            viewChangeSceneMode = camera._mode
            break
          }
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          //@ts-ignore
        } else if (camera._mode === Cesium.SceneMode.SCENE2D) {
          if (!currentPosition2D.equalsEpsilon(camera.position, 1e-6)) {
            viewChangeIndex = i
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            //@ts-ignore
            viewChangeSceneMode = camera._mode
            break
          }
        }
      }

      if (viewChangeIndex === -1) return

      const viewChangeWE = getWE(viewChangeIndex)
      const viewChangeCamera = viewChangeWE.viewer.camera
      let firstScene3D = 0
      for (let i = 0; i < viewNum; i++) {
        if (i === viewChangeIndex) continue
        const firstScene3DWE = getWE(i)
        if (viewChangeSceneMode === Cesium.SceneMode.SCENE3D) {
          const camera = firstScene3DWE.viewer.camera
          Cesium.Cartesian3.clone(viewChangeCamera.position, camera.position)
          Cesium.Cartesian3.clone(viewChangeCamera.positionWC, camera.positionWC)
          Cesium.Cartesian3.clone(viewChangeCamera.directionWC, camera.directionWC)
          Cesium.Cartesian3.clone(viewChangeCamera.upWC, camera.upWC)
          Cesium.Cartesian3.clone(viewChangeCamera.rightWC, camera.rightWC)
        } else {
          const vpDest = viewChangeWE.viewPoint
          vpDest.heading = firstScene3DWE.viewPoint.heading
          vpDest.pitch = firstScene3DWE.viewPoint.pitch
          vpDest.roll = firstScene3DWE.viewPoint.roll
          firstScene3DWE.jumpToViewpoint(vpDest)
        }
        firstScene3D = i
        break
      }

      const currentCamera = getWE(firstScene3D).viewer.camera
      currentCamera.position.clone(currentPosition3D)
      for (let i = 0; i < viewNum; i++) {
        if (i === viewChangeIndex || i === firstScene3D) continue
        const camera = getWE(i).viewer.camera
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if (camera._mode === Cesium.SceneMode.SCENE3D) {
          Cesium.Cartesian3.clone(currentCamera.position, camera.position)
          Cesium.Cartesian3.clone(currentCamera.positionWC, camera.positionWC)
          Cesium.Cartesian3.clone(currentCamera.directionWC, camera.directionWC)
          Cesium.Cartesian3.clone(currentCamera.upWC, camera.upWC)
          Cesium.Cartesian3.clone(currentCamera.rightWC, camera.rightWC)
        } else {
          const vp = getWE(firstScene3D).viewPoint
          getWE(i).jumpToViewpoint(vp)
          getWE(i).viewer.camera.position.clone(currentPosition2D)
        }
      }
    }
    destroy() {
      return Cesium.destroyObject(this)
    }
    isDestroyed() {
      return false
    }
  }

  getWE(0).postFrameListenerManager.add(new SyncListnenr())
}

onBeforeUnmount(() => {
  for (let i = 0; i < viewNum; i++) {
    const WE = getWE(i)
    WE.destroy()
  }
})

onMounted(() => {
  nextTick(() => {
    // load
    setupViewSync()

    for (let i = 1; i < viewNum; i++) {
      const WE = getWE(i)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      //@ts-ignore
      WE.viewer._clockViewModel._clock = getWE(0).viewer.clock
    }

    loadView1()
    loadView2()
  })
})

const loadView1 = () => {
  const WE = We_getInstance(0)
  if (!WE) return
  WE.debugShowFramesPerSecond = true
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  WE.baseLayerPickerWrapper.selectedImageryChangeEvent.addEventListener((_sender, layer) => {
    for (let i = 1; i < viewNum; i++) {
      const WE = getWE(i)
      WE.baseLayerPickerWrapper.selectedImageryIndex = layer
    }
  })

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  WE.baseLayerPickerWrapper.selectedTerrainChangeEvent.addEventListener((_sender, layer) => {
    for (let i = 1; i < viewNum; i++) {
      const WE = getWE(i)
      WE.baseLayerPickerWrapper.selectedTerrainIndex = layer
    }
  })
  WE.baseLayerPickerWrapper.selectedImageryIndex = 7

  WE.showUeAtmosphere = true

  WE.viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(107.91, 22),
    billboard: {
      image: Cesium.buildModuleUrl('Assets/Images/cesium_credit.png'), // default: undefined
      show: true, // default
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
      width: 100, // default: undefined
      height: 25, // default: undefined
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    },
  })
}

const loadView2 = () => {
  const WE = We_getInstance(1)
  if (!WE) return
  WE.showToolbar = false
  WE.viewer.scene.globe.enableLighting = true
}
</script>

<!-- .main-content1 {
  left: 0%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content2 {
  left: 33.33%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
} -->
<style lang="less" scoped>
.main-content2 {
  left: 0%;
  width: 50%;
  height: 100%;
  position: absolute;
  border: 1px solid;
}

.main-content1 {
  left: 50%;
  width: 50%;
  height: 100%;
  position: absolute;
  border: 1px solid;
}

.main-content3 {
  left: 66.66%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content4 {
  left: 0%;
  top: 33.33%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content5 {
  left: 33.33%;
  top: 33.33%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content6 {
  left: 66.66%;
  top: 33.33%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content7 {
  left: 0%;
  top: 66.66%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content8 {
  left: 33.33%;
  top: 66.66%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}

.main-content9 {
  left: 66.66%;
  top: 66.66%;
  width: 33.33%;
  height: 33.33%;
  position: absolute;
  border: 1px solid;
}
</style>
@/api/Env/WeatherEarth
